<script setup>
import { ref, reactive, defineExpose } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

import { dataType } from "./fieldTypes.js";

// 创建Mysql表
const fieldTypes = ref(dataType);

const ruleFrom = reactive({
	name: "",
	comment: "",
	fields: []
});

const rules = {
	name: [
		{
			required: true,
			message: "请输入表名",
			trigger: "blur"
		}
	],
	comment: [
		{
			required: true,
			message: "请输入表注释",
			trigger: "blur"
		}
	],
	fields: [
		{
			required: true,
			message: "请输入字段",
			trigger: "blur"
		}
	]
};

const visible = ref(false);

const beforeClose = done => {
	// 提示是否关闭，如果确定关闭则调用closeDrawer
	ElMessageBox.confirm("确认关闭？")
		.then(() => {
			closeDrawer();
		})
		.catch(() => {});
};

const addField = () => {
	ruleFrom.fields.push({
		name: "",
		type: "",
		length: "",
		decimal: "",
		default: "",
		null: "",
		comment: ""
	});
};

const deleteField = row => {
	const index = ruleFrom.fields.indexOf(row);
	ruleFrom.fields.splice(index, 1);
};

// 创建表
const createTable = () => {
	const data = {
		name: ruleFrom.name,
		comment: ruleFrom.comment,
		fields: ruleFrom.fields
	};
	console.log(data);
	ElMessage.success("创建成功");
	visible.value = false;
};

// 充值表单
const resetForm = () => {
	ruleFrom.name = "";
    ruleFrom.comment = "";
    ruleFrom.fields = [];
};

// 显示创建表
const openDrawer = () => {
	visible.value = true;
	resetForm();
	addField();
};

// 关闭创建表
const closeDrawer = () => {
	visible.value = false;
	resetForm();
};

defineExpose({
	openDrawer
});
</script>

<template>
	<el-drawer
		title="创建表"
		v-model="visible"
		:before-close="beforeClose"
		direction="rtl"
		size="100%"
	>
		<el-form ref="ruleFrom" :model="ruleFrom" label-position="top">
			<el-form-item label="表名" prop="name">
				<el-input v-model="ruleFrom.name" placeholder="请输入表名"></el-input>
			</el-form-item>
			<el-form-item label="表注释" prop="comment">
				<el-input v-model="ruleFrom.comment" placeholder="请输入表注释"></el-input>
			</el-form-item>
			<el-form-item label="字段" prop="fields">
				<el-table :data="ruleFrom.fields" border style="width: 100%">
					<el-table-column prop="name" label="字段名">
                        <template #default="{ row }">
                            <el-input v-model="row.name" placeholder="请输入字段名"></el-input>
                        </template>
                    </el-table-column>
					<el-table-column prop="type" label="字段类型" width="200">
                        <template #default="{ row }">
                            <el-select v-model="row.type" placeholder="请选择字段类型">
                                <el-option
                                    v-for="item in fieldTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
					<el-table-column prop="length" label="长度" width="200">
                        <template #default="{ row }">
                            <el-input v-model="row.length" placeholder="请输入长度"></el-input>
                        </template>
                    </el-table-column>
					<el-table-column prop="decimal" label="小数位" width="200">
                        <template #default="{ row }">
                            <el-input v-model="row.decimal" placeholder="请输入小数位"></el-input>
                        </template>
                    </el-table-column>
					<el-table-column prop="default" label="默认值" width="200">
                        <template #default="{ row }">
                            <el-input v-model="row.default" placeholder="请输入默认值"></el-input>
                        </template>
                    </el-table-column>
					<el-table-column prop="null" label="是否为空" width="200">
                        <template #default="{ row }">
                            <el-select v-model="row.null" placeholder="请选择是否为空">
                                <el-option label="是" value="YES"></el-option>
                                <el-option label="否" value="NO"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
					<el-table-column prop="comment" label="字段注释" width="200">
                        <template #default="{ row }">
                            <el-input v-model="row.comment" placeholder="请输入字段注释"></el-input>
                        </template>
                    </el-table-column>
					<el-table-column label="操作" width="200">
						<template #default="{ row }">
							<el-button type="danger" @click="deleteField(row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
		</el-form>
	</el-drawer>
</template>
